
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 统计分析 </el-breadcrumb-item>
      </el-breadcrumb>
      <div class="charts_box">
        <div class="charts_box1 i_center">
          <div class="bar_box box i_column">
            <div class="header_box i_center">
              <div class="i_items">
                <span class="smallTip"></span>
                <p class="name"> 各设备出借数量统计</p>
              </div>
              <div>
                <el-date-picker v-model="barTime" type="date" placeholder="选择日期"></el-date-picker>
              </div>
            </div>
            <div id="barChart" class="barChart"></div>
          </div>
          <div class="pie1_box box i_column">
            <div class="header_box i_center">
              <div class="i_items">
                <span class="smallTip"></span>
                <p class="name"> 实验室设备借出情况</p>
              </div>
              <div>
                <el-select v-model="pie1_selection" placeholder="请选择">
                  <el-option v-for="item in pie1_selection_options" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div id="line1_chart" class="line1_chart"></div>
          </div>
          <div class="pie1_box box i_column">
            <div class="header_box i_center">
              <div class="i_items">
                <span class="smallTip"></span>
                <p class="name">实验室各类设备存储量</p>
              </div>
              <div>
                <el-select v-model="pie2_selection" placeholder="请选择">
                  <el-option v-for="item in pie2_selection_options" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div id="line2_chart" class="line2_chart"></div>
          </div>
        </div>
        <div class="charts_box2 i_center">
          <div class="pie3_box box i_column">
            <div class="header_box i_center">
              <div class="i_items">
                <span class="smallTip"></span>
                <p class="name">当前设备状态统计</p>
              </div>
              <div>
                <el-select v-model="pie3_selection" placeholder="请选择">
                  <el-option v-for="item in pie3_selection_options" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="line3_chart" id="line3_chart"></div>
          </div>
          <div class="line_box box i_column">
            <div class="header_box i_center">
              <div class="i_items">
                <span class="smallTip"></span>
                <p class="name">近期出借数量统计</p>
              </div>
            </div>
            <div class="last_chart" id="last_chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import * as echarts from 'echarts';

export default {
  data() {
    return {
      barTime: "",
      pie1_selection: "",
      pie1_selection_options: "",
      pie2_selection: "",
      pie2_selection_options: "",
      pie3_selection: "",
      pie3_selection_options: "",
    }
  },
  mounted() {
    this.getChart();
  },
  created() {
  },
  computed: {

  },
  methods: {
    getChart() {
      var chartDom1 = document.getElementById('barChart');
      var myChart1 = echarts.init(chartDom1);

      var option1;
      option1 = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "15%",
          right: "3%",
          left: "5%",
          bottom: "12%",
        },
        xAxis: [
          {
            type: "category",
            data: ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6', '设备7', '设备8', '设备9', '设备10', '设备11', '设备12', '设备13', '设备14', '设备15',],
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            axisLabel: {
              margin: 10,
              color: "#BBC8D2",
              textStyle: {
                fontSize: 14,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#BBC8D2",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#BBC8D2",
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: [120, 200, 150, 80, 70, 110, 130, 200, 150, 80, 70, 110, 130, 30, 60],
            barWidth: "10px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#08C7FE", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#409EFE", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 0, 0],
              },
            },

          },
        ],
      };
      option1 && myChart1.setOption(option1);

      //echarts2

      var chartDom2 = document.getElementById('line1_chart');
      var myChart2 = echarts.init(chartDom2);
      var option2;
      let amountValue = 7800;
      option2 = {
        backgroundColor: "#fff",
        legend: {
          top: "bottom",
          x: "center",
          textStyle: {
            color: ["#777"],
          },
          icon: "roundRect", // 图例的形状
          // 环图之间间隔，图例防抖动
          inactiveBorderWidth: 0,
          itemStyle: {
            borderWidth: 0,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        title: [
          {
            left: "48%",
            top: "38%",
            textAlign: "center",
            text: "{a|" + amountValue + "}{c|}",
            textStyle: {
              fontSize: 14,
              rich: {
                a: {
                  fontSize: 48,
                  color: "#3D9DFC",
                },
                c: {
                  fontSize: 20,
                  color: "#535353",
                },
              },
            },
            subtext: "出借总数",
            subtextStyle: {
              fontSize: 20,
              color: ["#B4BFC7"],
            },
          },
        ],
        series: [
          {
            name: "设备出借",
            type: "pie",
            radius: ["55%", "80%"],
            center: ["50%", "45%"],
            data: [
              {
                value: 130,
                name: "设备一",
              },
              {
                value: 180,
                name: "设备二",
              },
              {
                value: 90,
                name: "设备三",
              },
              {
                value: 200,
                name: "设备四",
              },
            ],
            label: {
              normal: {
                show: false,
              },
            },
            // 环图之间间隔
            itemStyle: {
              normal: {
                borderWidth: 10,
                borderColor: "#fff",
              },
            },
          },
        ],
        color: [
          "#006AB2",
          "#15D2D6",
          "#61D4AD",
          "#FEC054",
          "#44A0CF",
        ],
      };
      option2 && myChart2.setOption(option2);
      //echarts3
      var chartDom3 = document.getElementById('line2_chart');
      var myChart3 = echarts.init(chartDom3);
      var option3;
      option3 = {
        backgroundColor: "#fff",
        legend: {
          // top: "bottom",
          orient: "vertical",
          x: "80%",
          y: "20%",
          textStyle: {
            color: ["#777"],
          },
          icon: "roundRect", // 图例的形状
          // 环图之间间隔，图例防抖动
          inactiveBorderWidth: 0,
          itemStyle: {
            borderWidth: 0,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },

        series: [
          {
            name: "设备存储",
            type: "pie",
            radius: ["0%", "80%"],
            center: ["40%", "50%"],
            data: [
              {
                value: 130,
                name: "设备一",
              },
              {
                value: 180,
                name: "设备二",
              },
              {
                value: 90,
                name: "设备三",
              },
              {
                value: 200,
                name: "设备四",
              },
              {
                value: 200,
                name: "设备五",
              },
            ],
            label: {
              normal: {
                show: false,
              },
            },
            // 环图之间间隔
            itemStyle: {
              normal: {
                borderWidth: 4,
                borderColor: "#fff",
              },
            },
          },
        ],
        color: [
          "#006AB2",
          "#15D2D6",
          "#61D4AD",
          "#FEC054",
          "#44A0CF",
          "#32C2F7"
        ],
      };
      option3 && myChart3.setOption(option3);
      //echarts4
      var chartDom4 = document.getElementById('last_chart');
      var myChart4 = echarts.init(chartDom4);
      var option4;
      option4 = {
        backgroundColor: "#fff",
        color: ['#80FFA5'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日",],
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            axisLabel: {
              align: "center",
              margin: 10,
              color: "#BBC8D2",
              textStyle: {
                fontSize: 14,
              },
            },
          }
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#BBC8D2",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#BBC8D2",
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#96C6F1'
                },
                {
                  offset: 1,
                  color: '#fff'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
          },

        ]
      };
      option4 && myChart4.setOption(option4);
      //echarts5
      var chartDom5 = document.getElementById('line3_chart');
      var myChart5 = echarts.init(chartDom5);
      var option5;
      var percent = 80; //百分数
      option5 = {
        // backgroundColor: "#081322",
        tooltip: {
          show: false,
          formatter: "{a} <br/>{b} : {c}%",
        },
        title: [
          {
            text: "未借用",
            y: "60%",
            x: "12%",
            textStyle: {
              fontSize: 36,
              fontFamily: "yueyuan",
              color: "#b3defc",
            },
          },

        ],
        series: [
          {
            name: "最外部进度条",
            type: "gauge",
            radius: "100%",
            center: ["20%", "center"], // 仪表位置
            splitNumber: 100,
            axisLine: {
              lineStyle: {
                color: [
                  [
                    100,
                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "rgba(145,207,255,0)",
                      },
                      {
                        offset: 0.5,
                        color: "rgba(70, 155 ,240,0.2)",
                      },
                      {
                        offset: 1,
                        color: "rgba(70, 155 ,240,0.8)",
                      },
                    ]),
                  ],
                  [1, "#f00"],
                ],
                width: 10,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
            animationDuration: 4000,
          },
          {
            name: "渐变数据环整个",
            type: "pie",
            radius: ["55%", "80%"],
            avoidLabelOverlap: false,
            startAngle: 210,
            color: [
              {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(66, 145, 226,0.9)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(66, 145, 226,0.3)", // 100% 处的颜色
                  },
                ],
              },
              "transparent",
            ],
            hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。
            legendHoverLink: false, //是否启用图例 hover 时的联动高亮。
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 66,
                name: "1",
                itemStyle: {
                  borderWidth: 3,
                  borderColor: "#4C7FDB",
                },
              },
              {
                value: 34,
                name: "2",
                itemStyle: {
                  borderWidth: 0,
                  borderColor: "transparent",
                },
              },
            ],
          },
          {
            name: "内部渐变线 ",
            type: "pie",
            radius: ["44%", "46%"],
            avoidLabelOverlap: false, //是否启用防止标签重叠策略
            startAngle: -30,
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: ["#4497EA"],
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 30,
                name: "1",
                itemStyle: {
                  color: ["transparent"],
                },
              },
              {
                value: 60,
                name: "2",
              },
            ],
          },
          {
            name: "环形百分比",
            type: "pie",
            radius: ["55%", "80%"],
            avoidLabelOverlap: false,
            startAngle: -30,
            color: ["#E7EAF1", "transparent", "transparent"],
            hoverAnimation: false,
            legendHoverLink: false,
            clockwise: false, //饼图的扇区是否是顺时针排布。
            itemStyle: {
              show: false,
              normal: {
                borderColor: "transparent",
                borderWidth: "20",
              },
              emphasis: {
                borderColor: "transparent",
                borderWidth: "20",
              },
            },
            z: 10,
            label: {
              normal: {
                show: false,
                position: "center",
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: ((100 - percent) * 240) / 360,
                label: {
                  normal: {
                    formatter: percent + "%",
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "60",
                      fontWeight: "normal",
                      color: "#b3defc",
                    },
                  },
                },
                name: "",
              },
              {
                value: 1,
                name: "",
              },
              {
                value: 100 - ((100 - percent) * 270) / 360,
                name: "",
              },
            ],
          },
          {
            // 底部
            name: "两端线",
            type: "pie",
            radius: ["55%", "80%"],
            startAngle: 210,
            endAngle: -40,
            labelLine: {
              show: false,
            },
            z: 15,
            silent: true,
            label: {
              show: false,
            },
            data: [
              {
                value: 3,
                itemStyle: {
                  color: "#4698EC",
                },
              },
              {
                value: 482,
                itemStyle: {
                  color: "transparent",
                },
              },
              {
                value: 3,
                itemStyle: {
                  color: "#4698EC",
                },
              },
              {
                value: 250,
                itemStyle: {
                  color: "transparent",
                },
              },
            ],
          },
        ],
      };
      option5 && myChart5.setOption(option5);

      window.addEventListener("resize", function (e) {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
        myChart4.resize();
        myChart5.resize();
      })
    },

  },

}
</script>
<style scoped lang="scss">
.i_center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.i_column {
  display: flex;
  flex-direction: column;
}

.i_items {
  display: flex;
  align-items: center;
}

.smallTip {
  width: 8px;
  height: 25px;
  background-color: #3E9BFC;
  margin-right: 10px;
  border-radius: 18%;
}

.name {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.header_box {
  width: 100%;
  height: 35px;
}

.box {
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px;
}

.bar_box {
  width: calc(50% - 20px);
  height: 400px;
}

.barChart {
  flex: 1;
}

.pie1_box {
  width: 25%;
  height: 400px;
  background-color: #fff;
}

.line1_chart {
  flex: 1;
}

.line2_chart {
  flex: 1;
}

.line3_chart {
  flex: 1;
}

.last_chart {
  flex: 1;
}

.el-select {
  width: 120px;
}

.pie3_box {
  width: calc(50% - 20px);
  height: 360px;
}

.line_box {
  width: calc(50% + 10px);
  height: 360px;
}

.charts_box {
  display: flex;
  flex-direction: column;
}

.charts_box1 {
  margin-bottom: 20px;
}
</style>
